<template>
	<view class="productDetail">
		
		<!-- 轮播图 -->
		<view class="swiperList">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in detailList.skuList" :key="item.id">
					<view class="swiper-item">
						<image class="swiper_image" :src="item.pic" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="collection">
				<image src="../../static/icons/collect.png" mode=""></image>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="info">
			<view class="price">
				<view class="preprice">
					<text>￥</text>
					<text class="money">{{detailList.promotionPrice}}</text>
					<text>.00</text>
				</view> 
				<text class="orprice">￥{{detailList.promotionPrice}}.00</text>
				<view class="coupon">
					<text>没有促销使用原价</text>
				</view> 
					
				
			</view>
			
			<view class="name">
				{{detailList.name}}
			</view>
			
			<view class="type">
				{{detailList.description}}
			</view>
		</view>
		
		<view class="cont">
			<!-- <rich-text :nodes="detailList.detailMobileHtml"></rich-text> -->
			<mp-html :content="detailList.detailMobileHtml" :tag-style='obj' />
		</view>
		
		<view class="goods_nav">
			<view class="kf"></view>
			<view class="nav_bt">
				<view>添加到购物车</view>
				<view>立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	// api
	import { productDetail } from "@/api/productDetail/index.js"
	export default {
		data() {
			return {
				detailList:{},
				obj:{
					img:'width:100%'
				}
			}
		},
		onLoad(option) {
			// console.log(option.id);
			this.getProductDetail(option.id);
		},
		methods: {
			getProductDetail(id){
				productDetail(id).then(res=>{
					 // console.log(res);
					 let {data}=res.data;
					 this.detailList=data.product;
					 // console.log(this.detailList);
					 uni.setNavigationBarTitle({
					 	title: data.product.name
					 });
				});
			}
		}
	}
</script>

<style lang="scss">
.productDetail{
	.swiperList{
		position: relative;
		swiper{
			width: 100%;
			height: 634rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				.swiper_image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		
		.collection{
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: 624rpx;
			right: 100rpx;
			background: #354e44;
			// box-shadow: 0 16px 24px 0 rgb(70 70 70 / 20%);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -50rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	
	}
	
	.info{
		padding: 70rpx 68rpx;
		.price{
			display: flex;
			align-items: baseline;
			.preprice{
				color: #f2270c;
				font-family: fantasy; 
				.money{
					font-size: 60rpx;
				}
			}
			.orprice{
				font-weight: 400;
				color: #b5b5b5;
				font-size: 24rpx;
				text-decoration: line-through;
				margin: 0 10rpx;
			}
			.coupon{
				background-color: #f2270c;
				color: #fff;
				font-size: 24rpx;
				padding: 0 12rpx;
				border-radius: 5rpx;
				border: 1px solid #ff8373;
				border-color: #f2270c;
			}
			
		}
		.name{
			color: #262626;
			    overflow: hidden;
			    font-size: 16px;
			    font-weight: 700;
				margin: 10rpx 0 30rpx 0;
		}
		
		.type{
			font-size: 12px;
			    color: #666;
		}
	}
	.cont{
		padding: 68rpx;
	}
	
	.goods_nav{
		width: 100%;
		height: 120rpx;
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;
		box-sizing: border-box;
		.kf{
			width: 60rpx;
			height: 60rpx;
			background: url('../../static/icons/kf.png') no-repeat center center;
			background-size: 40rpx 40rpx;
		}
		.nav_bt{
			display: flex;
			view{
				width: 238rpx;	
				height: 80rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 80rpx;
				&:nth-child(1){
					background-color: #e2e2e2;
                    color: #8f8f94;
				}
				&:nth-child(2){
					background-color: #354e44;
					color: #fff;
					
				}
			}
		}
	}
	
}
</style>
